<template>
<div class="home-container ">
    <!-- 导航栏--------------------------- -->
    <van-nav-bar class="page-nav-bar">
        <van-icon left-arrow name="arrow" slot="left" @click="$router.back()"></van-icon>
        <van-button class="search-btn" slot="title" type="info" size="small" round icon="search" to="/search">搜索</van-button>
    </van-nav-bar>
    <!-- 滑动信息栏目---------------------------- -->
    <van-tabs active="active" :title="channels.name" :key="channels.id"  v-for="channels in channels" class="channle-tabs" swipeable animated bind:change="onChange">
        <van-tab title="标签 1">{{channels.name}}</van-tab>
     
    </van-tabs>
     <i slot="right-icon" class="font_family icon-gengduo"></i> 

</div>
</template>

<script>
import {
    getUserChannels
} from "@/api/user"
export default {
    name: "home",
    data() {
        return {
            active: 1,
          
            channels:[]
        }
    },
    methods: {
        async loadchannels() {
            try{ const {data}= await   getUserChannels()
            this.channels=data.data.channels
            console.log(data);}catch(err){
              console.log("获取频导列表失败");
            }
        }
    }, 
    computed: {

    },
    watch: {

    },
    created() { 
        this.loadchannels()
    }

}
</script>

<style lang="less" scoped>
.home-container {
    .van-nav-bar {
        max-width: unset;
    }

    .search-btn {
        width: 555px;
        height: 45px;
        background-color: #5babfb;
        border: none;
        font-size: 28px;

        .van-icon {
            font-size: 32px;
        }
    }

    /deep/.channle-tabs {
        .van-tab {
            min-width: 200px;
            line-height: 82px;
            border-right: 1px solid #edeff3;
            border-bottom: 1px solid #edeff3;
        }

    }
}
</style>
